<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        form {
            width: 400px;
            border: 10px solid pink;
            padding: 20px;
        }
        
        label {
            display: block;
            height: 80px;
            position: relative;
        }
        
        input {
            height: 30px;
            font-size: 24px;
            padding-left: 20px;
        }
        
        label>span {
            position: absolute;
            left: 0;
            top: 35px;
            font-size: 20px;
            color: red;
            display: none;
        }
    </style>
</head>

<body>
    <form>
        <label>
        用户名: <input class="username" type="text" />
        <!-- 数字字母开头6～12位 忽略大小写 -->
        <span>请按照规则填写用户名</span>
      </label>
        <label>
        密码: <input class="password" type="text" />
        <!-- 数字字母下划线 6～12位 -->
        <span>请按照规则填写密码</span>
      </label>
        <label>
        手机号: <input class="phone" type="text" />
        <!-- 11位数字即可 -->
        <span>请按照规则填写手机号</span>
      </label>
        <label>
        邮箱: <input class="email" type="text" />
        <!-- 6～12位 开头为数字大小写字母 中间为数字字母下划线均可-->
        <!-- @ 只接收qq 163 sina -->
        <!-- com或者cn -->
        <span>请按照规则填写邮箱</span>
      </label>
        <input type="button" value="完善资料" />
    </form>

    <script>
        let username = document.querySelector('.username');
        let password = document.querySelector('.password');
        let phone = document.querySelector('.phone');
        let email = document.querySelector('.email');
        let spans = document.querySelectorAll('span');

        let r1 = /^(\d|[a-z]){6,12}$/i; // /^[0-9a-z]\w{5,11}$/i
        let r2 = /^\w{6,12}$/;
        let r3 = /^\d{11}$/;
        let r4 = /^\w{6,12}@(qq|163|sina)\.(com|cn)$/; // /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/

        username.addEventListener('input', () => {
            let text = username.value;
            console.log(text);
            if (r1.test(text)) {
                spans[0].style.display = 'none'
            } else {
                spans[0].style.display = 'block'
            }
        })
        password.addEventListener('input', () => {
            let text = password.value;
            console.log(text);
            if (r2.test(text)) {
                spans[1].style.display = 'none'
            } else {
                spans[1].style.display = 'block'
            }
        })
        phone.addEventListener('input', () => {
            let text = phone.value;
            console.log(text);
            if (r3.test(text)) {
                spans[2].style.display = 'none'
            } else {
                spans[2].style.display = 'block'
            }
        })
        email.addEventListener('input', () => {
            let text = email.value;
            console.log(text);
            if (r4.test(text)) {
                spans[3].style.display = 'none'
            } else {
                spans[3].style.display = 'block'
            }
        })
    </script>
</body>

</html>